*{margin:0;padding: 0;font-family: '微软雅黑',arial;}
/*网页排序*/
#welcome{z-index: 10;}
#set{z-index: 9;}
#index{z-index: 8;}
#chat{z-index: 10;}
#friend{z-index: 8;}

/*对所有的view进行规划*/
.view{left:0;top:0;width:100%;height:100%;}
/*欢迎页面*/
#welcome{position: relative;}
.welpic img{width:100%;height:100%;opacity: 0.4;}
.weldesc{position: absolute;top:50%;width:100%;height:30%;opacity:0;transform:translateY(100px);
	animation:movepic 1s linear 1s;animation-fill-mode:forwards;}
.weldesc h2{position:absolute;left:38%;top:30%;font-size: 38px;
	animation:movetext 2s linear 1s;animation-fill-mode:forwards;}
.logo{position: absolute;top:29%;left: 25%;width: 50%;height: 30%;
	transform:translateY(200px);opacity: 0;animation:movepic 2s;animation-fill-mode:forwards;}
.logo img{width: 100%;height: 100%;}

@keyframes movepic{
	100%{
		/*回到原来的位置*/
		transform:translateY(0);
		opacity: 1;
	}
}
@keyframes movetext{
	0%{transform:rotate(0);}
	20%{transform:rotate(10deg);}
	40%{transform:rotate(-10deg);}
	60%{transform:rotate(10deg);}
	80%{transform:rotate(-10deg);}
	100%{transform:rotate(0deg);}
}
.back{position: absolute;bottom: 0%;left: 41%;width: 50px;height: 40px;box-shadow: 0px 4px 3px #aaaaaa;
border-radius: 50%;border: 0;background: #39B3D7;color: white;font-size: 13px;opacity: 0.7;}

#login{position: relative;font-size: 20px;background-image: url('../img/login-background.jpg');}
#login .login-name{position: absolute;top:30%;left: 0;width: 100%;height: 5%;padding-top: 2%;}
#login input{width: 70%;height: 95%;font-size: 20px;border: none;border-bottom: 1px solid silver;}
#login .login-passwd{position: absolute;top:37%;left: 0;width: 100%;height: 5%;padding-top: 2%;}
#login .login-submit{position: absolute;;top: 46%;left: 0;width: 100%;height: 5%;}
#login .login-submit-button{position: absolute;left: 40%;top: 0;height: 100%;width: 20%;background: silver;
	line-height: 30px;text-align: center;font-weight: bold;color:black;border-radius: 5px;}

/*工具栏部分*/
#set{position: relative;}
.set-total{position: absolute;top: 90%;left:0;width: 100%;height: 10%;
	border-top: 3px solid rgb(210,210,212);}
.set-total .set-chat{position: absolute; left:0;width: 33%;height: 100%;
	border-right:3px solid rgb(210,210,212);  background-color: #FFFFB9;}
.set-total .set-friend{position: absolute; right:34%;width: 33%;height: 100%;
	background-color: #FFDEA4;}
.set-total .set-set{position: absolute; right:0;width: 34%;height: 100%;
	background-color: #FFDED4;}
.set-total div img{position: absolute; height: 100%;left: 19%;}

/*用户对话列表*/
#index{position: relative;}
#index .index-object{position: relative; width: 100%;height: 12%;border-bottom: 2px solid rgb(210,210,212); }
#index .index-photo{position: absolute; width:25%;height: 100%;left: 0; 
	border-right: 2px solid rgb(210,210,212);}
.index-photo img{width: 100%;height: 100%;}
#index .index-dialogue{position: absolute; width:75%;height: 100%;right: 0; }
.index-dialogue .index-name{position: absolute;left: 5%;top:17%;font-size: 25px;font-weight: bold;}
.index-dialogue .index-message{position: absolute;left: 5%;top:66%;color:blue;}

/*用户聊天列表*/
#chat{position: relative;background-color: rgb(230,230,230);}
#chat .chat-user{position:relative;width: 100%;height: 12%;}
#chat .chat-oppo{position:absolute; left: 0;width: 80%;height: 90%;top:5%;bottom: 5%;}
#chat .chat-me{position: absolute; right: 0;width: 80%;height: 90%;top:5%;bottom: 5%;}
#chat .chat-photo-oppo{position: absolute;top:10%;height: 80%;width: 20%;left: 0;}
#chat .chat-photo-me{position: absolute;height: 80%;top:10%;width: 20%;right: 0;}
#chat img{width: 100%;height: 100%;}
#chat .chat-words-oppo{ padding: 1%; position: absolute; left:25%; top:10%;width: 80%;height: 90%;background-color: white; border-radius: 5px;}
#chat .chat-words-me{padding: 1%; position: absolute; right:25%;width: 80%;top:10%;height: 90%;background-color: white; border-radius: 5px;}
#chat .chat-say{position:absolute;width: 100%;height: 50px;left: 0;top:82%;border-top: 1px white solid;}
#chat .chat-input{position:absolute;border-radius:5px; width: 80%;height: 80%;left: 1%;top:20%;border-style: none;
	line-height: 100%;font-size: 23px;line-height: 100%;}
#chat .chat-send{position:absolute;width: 15%;height: 80%;left: 83%;top:20%;border-radius: 5px;background-color: rgb(17,213,77);
font-size: 20px; font-weight: bold;color:white;}
#chat .chat-send-word{line-height: 40px;width:100%;height:100%;text-align: center;}

/*用户朋友列表*/
#friend{position: relative;background-color: rgb(230,230,230); }
#friend .friend-user{position: relative;width: 100%;height: 12%;background-color:white;border-bottom: 1px solid gray; }
#friend .friend-photo{position: absolute;width: 25%;height: 90%;padding-top: 1%;padding-left: 1%;}
.friend-photo img{width: 100%;height: 100%;}
#friend .friend-name{position: absolute;width: 80%;height: 100%;left: 30%; text-indent: 2%; font-size: 30px;line-height: 55px;}
#friend .friend-num{width: 100%;padding-top: 3%; height: 8%;text-align: center;font-size: 15px;color:silver;}


/*js部分所用样式*/
#login .login-submit-button-touchstart{background: rgb(96,0,7);color:white;}


/*用户设置页面列表*/
#user{position: relative;background:rgb(230,230,230); }
#user .user-base{position: relative; width: 100%;height: 19%;border-bottom: 2px solid rgb(210,210,212); }
#user .user-photo{position: absolute; width:37%;height: 100%;left: 0; border-right: 2px solid rgb(210,210,212);}
.user-photo img{width: 100%;height: 100%;}
#user .user-info{position: absolute; width:63%;height: 100%;right: 0; }
.user-info .user-name{position: absolute;left: 5%;top:17%;font-size: 25px;font-weight: bold;color:rgb(239,75,29);}
.user-info .user-id{position: absolute;left: 5%;top:67%;font-size: 17px;font-weight: bold;color:rgb(4,127,252);}
.user-set{position: absolute;left: 0;width: 100%;top:80%;}
.user-set .user-logout{position: absolute;left: 0;width: 100%;height:35px; top:0;background: rgb(153,189,114);color:white;
	border-top: 1px solid red;text-align: center;font-size: 25px;}
